<!DOCYTPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试</title>
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
	{{message}}	
	<div>
		<ul>
        	<li v-for="item in items">{{ item.message }}</li>
    	</ul>
	<a v-bind:herf="path">baidu</a>
	<br>
	<input v-model="inmessage" placeholder="edit me"></input>
	<br>
	<p>Message is {{inmessage}}</p>
	<button v-on:click="dosomething">Click Me</button>
	<my-component title='test props'></my-component>		<!-- 把自定义组件添加到页面 -->
	<my-button v-on:increment='incrementTotal'></my-button>
	<p>total clicked {{total}} times.</p>
	</div>
</div>
	<script>
		const HelloVueApp = {
			data(){			//data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象
				return {	// 属性一般放在这个对象中
					message: 'Hello Vue!!',
					count: 4,
					index: 0.99,
					inmessage: 'test',
					items: [
                    				{ message: 'Foo' },		// 数组绑定
                    				{ message: 'Bar' },
                    				{ message: 'Baz' },
                    				],
					path: "www.baidu.com",
					total: 0,
					}
				},
			methods:{		// 方法存储的地方
				increment(){
					this.count++
					this.index += 1;
				},
				dosomething(){
					alert('hello world!!!!')
				},
				incrementTotal(){
					this.total++;
				}	
			}
		}
		

	const app = Vue.createApp(HelloVueApp)
	app.component('my-component',{		// 添加一个组件
		props: ['title'],		// 给自定义组件添加一个属性
		template: '<div>{{title}}</div>' // 绑定属性到组件上去
	});

	app.component('my-button',{
		template: '<button v-on:click="increment">You clicked me {{count}} times.</button>>',
		data(){
			return {count: 0};
		},
		methods: {
			increment(){
				this.count++;
				this.$emit('increment');
			}
		}	
	});
	
	const vm = app.mount('#hello-vue')	// 把Vue创建的实例对象绑定到div上面
	document.write(vm.$data.message)	//$data 的形式存储在组件实例中
	document.write('<br>')
	document.write(vm.message)		// 直接用组件调用
	document.write('<br>')
	vm.$data.message = 'Hello Vue!!!!!!!'
	document.write(vm.message)
	document.write('<br>')
	document.write(vm.count)
	document.write('<br>')
	vm.increment()
	document.write(vm.index);

// 1:页面加载时，浏览器解析 HTML 和 JavaScript。
// 2:Vue.js 脚本执行时，创建了一个 Vue 应用实例，并将其绑定到 <div id="hello-vue"> 元素上。
// 3:Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
// 4:当 message 数据发生变化时（例如通过用户交互或异步操作），页面会自动更新以反映这些变化。

	</script>
</body>
</html>
